/*
 * @Author: wwssaabb
 * @Date: 2021-02-26 08:59:02
 * @LastEditTime: 2021-02-27 07:56:19
 * @FilePath: \sass_demo\Visual Buttons\sass\main.scss
 */

*{
  padding: 0;
  margin: 0;
  user-select: none;
}

body{
  width: 100vw;
  height: 100vh;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn{
  width: 40vw;
  height: 40vw;
  position: relative;
  display: inline-block;
  color:#fff;
  background-image: linear-gradient(180deg,#aa4b6b,#6b6b83,#3b8d99);
  font:3em/1.2em 'Lobster', cursive;
  letter-spacing: 2px;
  border-radius: .7vw;
  transform: perspective(400px);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: .2s;
  display: flex;
  justify-content: center;
  align-items: center;
  &:hover{
    text-shadow: 0 0 5px #9c5270,0 0 10px #9c5270,0 0 20px #9c5270,0 0 50px #9c5270;
  }

   div{
    position:absolute;
    background-color: transparent;
    z-index: 100;
    &:hover{
      border: 1px solid red;
    }
    &.bl{
      bottom: 0;
      left: 0;
    }
    &.br{
      bottom: 0;
      right: 0;
    }
    &.tl{
      top: 0;
      left: 0;
    }
    &.tr{
      top: 0;
      right: 0;
    }
  }

}


